import React from 'react'
/*-------组件中最重要的两个概念： state（状态）  props（属性）------*/
 
//父组件通过 list 传过来，子组件接收  props  则props.list.length等
// 或者解构出list   ({list})
const List = ({list}) => {
    return (
        <div>
            <h2>正在进行条数：{list.length}</h2>
            <ul>
                {
                    //list 可以执行几次取决于useState
                    //map 的返回值由里面最终函数返回值决定
                    //进行逆序添加、删除时，不能用索引值;当页面有输入类DOM节点时，不能用索引值
                    list.map( (item, index)=>(
                        // 给一个独一无二的key
                        <li key={item.id}>  
                            <input type="checkbox" />
                            ---{item.title}---
                            <button>删除</button>
                        </li>  //变量用 {}
                    ))  
                }
            </ul>
        </div>
    )
}

export default List
